import { React, useState, useEffect } from 'react'
import { Link,useHistory } from 'react-router-dom'


const Home = (props) => {
    //const history = useHistory();//在使用Home组件外部引入，引入useHistory，不用props引入
    //const match = useRouteMatch();
    const [topics, setTopics] = useState([]);
    useEffect(() => {
        fetch('https://cnodejs.org/api/v1/topics', {})
            .then(res => res.json())
            .then(res => {
                res.data && setTopics(res.data);
            })
        //.catch(err=>console.log(err))//进入catch就是报错了

    }, [])

    return (
        <div>
            {
                // topics.map(topic => (<li key={topic.id}>
                //     <Link to={'/detail/' + topic.id} >{topic.title}</Link>
                // </li>))

                topics.map(topic => (
                    <li key={topic.id} onClick={() => props.history.push('/detail/' + topic.id)}>
                        {topic.title}
                    </li>
                ))
            }
        </div>
    )
}

export default Home
